<template>
  <div>
    <el-dialog
      :title="$t('ExpressPackageLang.selectPackage')"
      :visible.sync="Visible"
      width="1300px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <MyTable
          ref="ExpressPackage_generate_select"
          :gridOptions="{checkboxConfig:{checkField: 'checked', trigger: 'row', highlight: true,reserve:true},rowConfig:{isCurrent: true, isHover: true,keyField:'id'}}"
          :tableColumn="tableColumn"
          :tableData="tableData"
          :isOrder="false"
          @sendCheckBoxList="setCheckBox"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
        </MyTable>
        <Pagination
          :isHaveBtn="false"
          ref="pagination"
          :currentPage="pageinfo.page"
          :pageSize="pageinfo.limit"
          :total="pageinfo.number_all"
          :page_all="pageinfo.page_all"
          @pagination="SetPagination"
        >
        </Pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {  },
  props: {
    // 接收绑定参数
    
    midHight: [Number,String],
  },
  data() {
    return {
      filterData:{
        page: "",
        limit: "30",
      },
      pageinfo: {
        page: 1,
        page_all: 1,
        limit: 30,
        number_all: 0,
      },
      typeName:'',
      start_local:'',
      uid:'',
      Visible: false,
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          type: 'checkbox',
          width: 40,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.Shipper'),
          prop: "uid_name",
          width: 100,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.Origin'),
          prop: "start_local_name",
          width: 100,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.weight'),
          prop: "weight",
          width: 100,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.long'),
          prop: "length",
          width: 100,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.wide'),
          prop: "width",
          width: 100,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.high'),
          prop: "height",
          width: 100,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.volume'),
          prop: "volume",
          width: 100,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.density'),
          prop: "density",
          width: 100,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.goods_name'),
          prop: "goods_name",
          width: 100,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.quantity_num'),
          prop: "quantity_num",
          width: 100,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.model_num'),
          prop: "style_num",
          width: 100,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.packing_method'),
          prop: "packing_method_name",
          width: 100,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.remarks'),
          prop: "remark",
          width: 100,
          order:"",
        },
      ],
      tableData: [],
      sendDataArrCopy:[],
      sendDataArr:[],
      rows:[]
    };
  },
  created() {
    
  },
  mounted() {},
  watch: {
  },
  methods: {
    init(data,rows,start_local,typeName) {
      this.uid=data
      this.start_local=start_local
      this.typeName=typeName
      this.Visible = true;
      if(this.typeName=='快递'){
        this.tableColumn= [
          {
            label: "",
            prop: "table_code",
            width:40,
          },
          {
            type: 'checkbox',
            width: 40,
          },
          {
            checked: true,
            label: this.$t('ExpressCargoManagementLang.Express_Number'),
            prop: "express_sn",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.Origin'),
            prop: "start_local_name",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.weight'),
            prop: "calWeight",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.long'),
            prop: "length",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.wide'),
            prop: "width",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.high'),
            prop: "height",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.volume'),
            prop: "cal_volume",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.goods_name'),
            prop: "goods_name",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.remarks'),
            prop: "remarks",
            width: 100,
            order:"",
          },
        ]
      }else{
        this.tableColumn= [
          {
            label: "",
            prop: "table_code",
            width:40,
          },
          {
            type: 'checkbox',
            width: 40,
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.Shipper'),
            prop: "uid_name",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.Origin'),
            prop: "start_local_name",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.weight'),
            prop: "weight",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.long'),
            prop: "length",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.wide'),
            prop: "width",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.high'),
            prop: "height",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.volume'),
            prop: "volume",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.density'),
            prop: "density",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.goods_name'),
            prop: "goods_name",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.quantity_num'),
            prop: "quantity_num",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.model_num'),
            prop: "style_num",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.packing_method'),
            prop: "packing_method_name",
            width: 100,
            order:"",
          },
          {
            checked: true,
            label: this.$t('ExpressDeliveryManagementLang.remarks'),
            prop: "remark",
            width: 100,
            order:"",
          },
        ]
      }
      this.rows=rows
      this.sendDataArrCopy=JSON.parse(JSON.stringify(this.rows))
      this.getTableData();
    },
    // 更改分页
    SetPagination(data){
      this.filterData.page=data.page
      this.filterData.limit=data.limit
      this.pageinfo.page=data.page
      this.pageinfo.limit=data.limit
      this.getTableData()
    },
    //获取表格数据
    async getTableData(){
      let arr=[]
      if(this.typeName=='快递'){
        await this.$get('packageList',{type:2,status:1,page:this.filterData.page,limit:this.filterData.limit,start_local:this.start_local}).then((res) => {
          this.tableData=res.data
          this.pageinfo=res.pageinfo
          this.pageinfo.limit=Number(this.pageinfo.limit)
          this.rows.forEach(el=>{
            if(res.data.filter(item=>{return item.id==el.id}).length>0){
              arr.push(res.data.filter(item=>{return item.id==el.id})[0])
            }
          })
        })
      }else {
        await this.$get('unownedPackageList',{uid:this.uid,page:this.filterData.page,limit:this.filterData.limit,start_local:this.start_local}).then((res) => {
          this.tableData=res.data
          this.pageinfo=res.pageinfo
          this.pageinfo.limit=Number(this.pageinfo.limit)
          this.rows.forEach(el=>{
            if(res.data.filter(item=>{return item.id==el.id}).length>0){
              arr.push(res.data.filter(item=>{return item.id==el.id})[0])
            }
          })
        })
      }
      this.toggleSelection(arr)
    },
    // 多选框勾选集合
    setCheckBox(data){
      this.sendDataArr=data
      this.sendDataArrCopy=this.sendDataArrCopy.filter(item=>{return this.tableData.findIndex(el=>{return el.id==item.id})==-1})
      this.sendDataArrCopy.push(...this.sendDataArr)
    },
    //默认勾选
    toggleSelection(rows) {
      console.log(rows)
      if (!!rows&&rows.length>0) {
        rows.forEach(row => {
          this.$refs.ExpressPackage_generate_select.$refs.tableRef.setCheckboxRow(row,true);
        });
        this.sendDataArr=this.tableData.filter(item=>{return item.checked})
      } else {
        this.$refs.ExpressPackage_generate_select.$refs.tableRef.clearCheckboxRow();
        this.sendDataArr=[]
      }
    },
    // 提交修改
    confirm() {
      this.$emit("success",this.sendDataArrCopy);
      this.cancel()
    },
    //取消修改
    cancel(){
      this.filterData={
        page: "",
        limit: "30",
      },
      this.pageinfo={
        page: 1,
        page_all: 1,
        limit: 30,
        number_all: 0,
      },
      this.toggleSelection()
      this.Visible = false;
    },
  },
};
</script>

<style scoped lang="less" >

</style>